
 import React, { PureComponent } from 'react'
 import {withRouter} from "react-router-dom";
 import {connect} from "react-redux";
 import ImageUpload from "@common/presentational/ImageUpload";
 import PageBackHeader from "@common/PageBackHeader";
 import ChangeNameModal from "@components/account/modal/ChangeNameModal";
 import { updateUserInfo, getUserInfo } from '@sagas/user'
 function mapStateToProps (state) {
    const { user } = state
    return {
        userInfo: user.userInfo,
    }
}
@withRouter
@connect (
    mapStateToProps,
    {
        updateUserInfo,
        getUserInfo
    }
)
 class AccountPage extends PureComponent {
     constructor(props) {
         super(props);
         this.state = {
             avatar: '1'
         }
         this.changeNameModalRef = React.createRef()
         this.changeName = this.changeName.bind(this)
         this.changeAvatar = this.changeAvatar.bind(this)
     }

    componentDidMount () {
        this.props.getUserInfo()
     }
 
     changeName(){
        const { userInfo } = this.props
        this.changeNameModalRef.current?.show({
            name: userInfo.user_name
        })
     }

     changeAvatar(value){
         if(value){
             this.props.updateUserInfo({
                avatar: value
            },()=>{
                this.props.getUserInfo()
                this.setState({
                    avatar: value
                })
            })
         }else{
            this.setState({
                avatar: value
            })
         }
     }
 
     render () {
        const { userInfo } = this.props
        const { avatar } = this.state
         return (
             <div className="bilin-web">
                 <PageBackHeader title={'账号设置' }/>
                 <div className="bilin-web-body with-footer">
                     <div className="user-setting-page">
                        <div className='setting-item bdb-l'>
                            <div className='flex-center'>
                                <div className='label ft-clr-ml'>头像</div>
                                <div className='value ft-clr-d'>
                                    <ImageUpload  value={avatar === '' ? avatar : userInfo.avatar} onChange={this.changeAvatar} accept='image/png, image/jpeg, image/jpg' />
                                </div>
                            </div>
                        </div>
                        <div className='setting-item bdb-l'>
                            <div className='flex-center'>
                                <div className='label ft-clr-ml'>昵称</div>
                                <div className='value ft-clr-d'>{userInfo.user_name}</div>
                            </div>
                            <div onClick={this.changeName} className='ft-hover ft-clr-md'>修改昵称</div>
                        </div>
                        <div className='setting-item bdb-l'>
                            <div className='flex-center'>
                                <div className='label ft-clr-ml'>手机号</div>
                                <div className='value ft-clr-d'>{userInfo.mobile}</div>
                            </div>
                        </div>
                        <div className='setting-item bdb-l'>
                            <div className='flex-center'>
                                <div className='label ft-clr-ml'>微信</div>
                                <div className='value ft-clr-d'>{userInfo.g_id ? '已绑定' :'未绑定'}</div>
                            </div>
                        </div>
                     </div>
                 </div>
                <ChangeNameModal ref={this.changeNameModalRef} />
             </div>
         )
     }
 }
 
 export default AccountPage